<template>
  <a-card style="width: 100%">
    <div class="header">
      <a-space class="left" direction="vertical">
        <Condition
          :condition="condition"
          :btns="['reset']"
          @search="onSearch"
          @reset="conditionReset"
        />
        <div class="title">共筛选出 {{ pagination.total }} 条数据</div>
      </a-space>
      <a-space class="right" direction="vertical">
        <a-input-search
          v-model:value="planName"
          placeholder="请输入管理方案名称"
          style="width: 220px"
          @search="onSearch"
        />
        <!-- <a-input class="input" placeholder="请输入管理方案名称"></a-input> -->
        <a-button type="primary" @click="modalShow()">新建管理方案</a-button>
      </a-space>
    </div>
    <div class="main">
      <a-table
        class="table"
        size="small"
        :loading="loading"
        :dataSource="List"
        :columns="columns"
        :pagination="pagination"
        @change="paginationChange"
        :sticky="{ offsetHeader: 0 }"
      >
        <!-- :scroll="{ y: 264 }" -->
        <!-- :scroll="{ y: 464 }" -->
        <template #bodyCell="{ column, text, index, record }">
          <template v-if="column.dataIndex === 'no'">
            {{ (pagination.current - 1) * pagination.pageSize + index + 1 }}
          </template>
          <template v-else-if="column.dataIndex === 'groupNames'">
            <p>
              <a-tag
                :title="item"
                class="groupTag"
                type="parmary"
                v-for="(item, i) in record[column.dataIndex]"
                :key="i"
                >{{ item }}</a-tag
              >
            </p>
          </template>
          <template v-else-if="column.dataIndex === 'createTime'">
            {{ timeFilter(record[column.dataIndex]) }}
          </template>
          <template v-else-if="column.dataIndex === 'action'">
            <a-button type="link" @click="modalShow(record)">查看详情</a-button>
            <a-button
              type="link"
              :disabled="
                (record.managePlanNames && record.managePlanNames.length > 0) ||
                (record.groupNames && record.groupNames.length > 0)
                  ? true
                  : false
              "
              @click="DelPlan(record)"
              >删除方案</a-button
            >
          </template>
          <template v-else>
            {{ text }}
          </template>
        </template>
      </a-table>
    </div>
    <a-modal
      width="1200px"
      :bodyStyle="store.userStore.bodyStyle"
      v-model:open="modal.open"
      :title="modal.title"
      ok-text="确认"
      cancel-text="取消"
      @ok="modalConfirm"
      :maskClosable="false"
    >
      <a-form
        class="modelForm"
        ref="modelForm"
        :colon="false"
        :model="formState"
        :label-col="{ style: { width: '140px' } }"
      >
        <a-form-item
          v-if="modal.type === 'detail'"
          :label-col="{ style: { width: '110px' } }"
          label="已配置专病分组"
        >
          <a-space wrap>
            <a-tag type="parmary" v-for="(item, i) in formState.groupNames" :key="i">{{
              item
            }}</a-tag>
            <span class="empty-text" v-if="!formState.groupNames || !formState.groupNames.length"
              >暂无专病分组</span
            >
          </a-space>
        </a-form-item>
        <a-form-item
          label="管理方案名称"
          :label-col="{ style: { width: '110px' } }"
          name="planName"
          required
          :rules="[
            {
              required: true,
              message: '管理方案名称不能为空',
              trigger: 'change'
            }
          ]"
        >
          <a-input
            style="width: 350px"
            :maxLength="50"
            v-model:value="formState.planName"
            autocomplete="off"
            placeholder="请输入管理方案名称"
            :disabled="modal.type === 'detail'"
          />
        </a-form-item>
        <a-form-item>
          <a-row class="title">
            <a-col :span="24">
              <span class="red">*</span>
              管理路径编辑
            </a-col>
          </a-row>
        </a-form-item>

        <div class="node" v-for="(subitem, i) in formState.managePlanNodeEntity" :key="i">
          <a-form-item>
            <a-row class="title">
              <a-col :span="18"> 管理节点{{ i + 1 }} </a-col>
              <a-col :span="6" style="text-align: right">
                <a-button
                  v-if="modal.type !== 'detail'"
                  type="link"
                  parmary
                  style="padding-right: 0"
                  @click="copyNode(i, formState.managePlanNodeEntity)"
                  >复制节点</a-button
                >
                <a-button
                  v-if="modal.type !== 'detail'"
                  type="link"
                  danger
                  @click="del(i, formState.managePlanNodeEntity, 'managePlanNodeEntity')"
                  >删除节点</a-button
                >
              </a-col>
            </a-row>
          </a-form-item>
          <a-form-item
            label="进入管理路径后"
            :label-col="{ style: { width: '130px' } }"
            :name="['managePlanNodeEntity', i]"
            :rules="[
              {
                validator: validator_node,
                trigger: 'change'
              }
            ]"
          >
            <a-row :gutter="[8, 0]">
              <a-col :span="4">
                <a-input-number
                  min="1"
                  :precision="0"
                  :step="1"
                  style="width: 96px"
                  v-model:value="subitem.pathDay"
                  autocomplete="off"
                  :disabled="modal.type === 'detail'"
                  @change="pathDayChange($event, subitem, 'managePlanNodeEntity')"
                />
                天
              </a-col>
              <a-col :span="2" style="line-height: 32px">管理行为</a-col>
              <a-col :span="18">
                <a-row :gutter="[8, 8]">
                  <template v-for="(item, index) in subitem.behaviorJson" :key="index">
                    <a-col>
                      <a-form-item-rest>
                        <a-select
                          v-model:value="item.type"
                          style="width: 120px"
                          @change="tempTypeChange($event, item)"
                          :disabled="modal.type === 'detail'"
                          :getPopupContainer="(triggerNode) => triggerNode.parentNode"
                        >
                          <a-select-option v-for="t in tempMaps" :value="t.value" :key="t.id">{{
                            t.label
                          }}</a-select-option>
                        </a-select>
                      </a-form-item-rest>
                    </a-col>
                    <a-col style="width: calc(100% - 144px)" class="row">
                      <a-form-item-rest>
                        <a-tooltip placement="top">
                          <template v-if="item.template_id" #title>{{
                            item.template_name
                          }}</template>
                          <a-select
                            v-model:value="item.template_id"
                            showSearch
                            optionFilterProp="label"
                            :placeholder="placeholderMsg(item.type)"
                            @change="
                              templateChange(
                                $event,
                                TemplateList[item.type],
                                item,
                                subitem.pathDay,
                                ['managePlanNodeEntity', i]
                              )
                            "
                            :disabled="modal.type === 'detail'"
                            style="width: 80%"
                            :getPopupContainer="(triggerNode) => triggerNode.parentNode"
                            :listHeight="150"
                          >
                            <a-select-option
                              v-for="t in item.type ? TemplateList[item.type] : []"
                              :value="t.id"
                              :key="t.id"
                              :label="t.templateName"
                              >{{ t.templateName }}</a-select-option
                            >
                          </a-select>
                        </a-tooltip>
                      </a-form-item-rest>
                      <a-col v-if="(item.type === 1 || item.type === 2) && modal.type !== 'detail'">
                        <a-button type="link" @click="templateAdd(item.type, index, i)"
                          >新增模板</a-button
                        >
                      </a-col>
                      <a-col v-if="modal.type !== 'detail'">
                        <icon-font
                          v-if="index"
                          class="icon-del"
                          @click="del(index, subitem.behaviorJson, 'managePlanNodeEntity')"
                          type="icon-shanchu"
                        />
                        <icon-font
                          v-else
                          class="icon-plus"
                          @click="addOptions(subitem.behaviorJson)"
                          type="icon-xinzeng"
                        />
                      </a-col>
                    </a-col>
                  </template>
                </a-row>
              </a-col>
            </a-row>
          </a-form-item>
        </div>
        <a-form-item v-if="modal.type !== 'detail'">
          <a-row>
            <a-button class="add" :icon="h(PlusOutlined)" @click="addNode">新增管理节点</a-button>
          </a-row>
        </a-form-item>
      </a-form>
      <template #footer>
        <template v-if="modal.type !== 'detail'">
          <a-button @click="modal.open = false">取消</a-button>
          <a-button :loading="modal.loading" type="primary" @click="modalConfirm">确认</a-button>
        </template>
        <template v-else>
          <a-button
            @click="modalUpdate"
            :disabled="formState.groupNames && formState.groupNames.length > 0 ? true : false"
            >编辑</a-button
          >
          <a-button type="primary" @click="modal.open = false">确认</a-button>
        </template>
      </template>
    </a-modal>
    <a-modal
      width="720px"
      :bodyStyle="store.userStore.bodyStyle"
      v-model:open="modal2.open"
      :title="modal2.title"
      ok-text="存为模板"
      cancel-text="取消"
      @ok="modalConfirm2"
      :maskClosable="false"
    >
      <a-form
        class="modelForm"
        ref="modelForm2"
        :colon="false"
        :model="formState2"
        :label-col="{ style: { width: '140px' } }"
      >
        <a-form-item
          label="健康教育名称"
          name="templateName"
          required
          :rules="[
            {
              required: true,
              message: '健康教育名称不能为空',
              trigger: 'change'
            }
          ]"
        >
          <a-input
            v-model:value="formState2.templateName"
            autocomplete="off"
            :maxlength="50"
            placeholder="请输入健康教育名称"
          />
        </a-form-item>
        <a-form-item
          label="健康教育内容"
          required
          name="context"
          :rules="[
            {
              required: true,
              message: '请输入健康教育内容',
              trigger: 'change'
            }
          ]"
        >
          <a-textarea
            style="width: 100%"
            v-model:value="formState2.context"
            placeholder="请输入健康教育内容"
            :rows="20"
            :maxlength="5000"
            show-count
          />
        </a-form-item>
      </a-form>
    </a-modal>
    <a-modal
      width="720px"
      v-model:open="modal3.open"
      :title="modal3.title"
      ok-text="存为模板"
      cancel-text="取消"
      @ok="modalConfirm3"
      :maskClosable="false"
    >
      <a-form
        class="modelForm"
        ref="modelForm3"
        :colon="false"
        :model="formState3"
        :label-col="{ style: { width: '140px' } }"
      >
        <a-form-item
          label="健康提醒名称"
          name="templateName"
          required
          :rules="[
            {
              required: true,
              message: '健康提醒名称不能为空',
              trigger: 'change'
            }
          ]"
        >
          <a-input
            v-model:value="formState3.templateName"
            autocomplete="off"
            :maxlength="50"
            placeholder="请输入健康提醒名称"
          />
        </a-form-item>
        <a-form-item
          label="健康提醒类型"
          name="remindType"
          required
          :rules="[
            {
              required: true,
              message: '请选择健康提醒类型',
              trigger: 'change'
            }
          ]"
        >
          <a-select
            v-model:value="formState3.remindType"
            :getPopupContainer="(triggerNode) => triggerNode.parentNode"
            style="width: 100%"
          >
            <a-select-option :value="1">用药提醒</a-select-option>
            <a-select-option :value="2">复查提醒</a-select-option>
            <a-select-option :value="3">其他提醒</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="健康提醒内容" required name="context">
          <a-textarea
            style="width: 100%"
            v-model:value="formState3.context"
            placeholder="请输入健康提醒内容"
            :rows="3"
            :maxlength="300"
            show-count
          />
        </a-form-item>
      </a-form>
    </a-modal>
  </a-card>
</template>

<script lang="ts" setup name="管理方案">
import Condition from '@/components/Condition/index.vue'
import { message, Modal } from 'ant-design-vue'
import { h, createVNode, onMounted } from 'vue'
import { timeFilter } from '@/utils/tools'
import { PlusOutlined, ExclamationCircleFilled } from '@ant-design/icons-vue'
import { getPlanList, FollowFormAdd } from '@/api/templateManage'
import { getTemplateMaps, PlanSave, PlanUpdate, PlanDel } from '@/api/templateManage'
import _ from 'lodash'
import { useDict } from './components/getDict'
import { Model } from 'echarts'
import { getCreatorByManage } from '@/api/templateManage'
import dayjs from 'dayjs'
import store from '@/store'
const templateType = 0
const { creatorList, groupList } = useDict(templateType)

const eventMaps = [
  {
    label: '诊断',
    value: 1
  },
  {
    label: '药品',
    value: 2
  },
  {
    label: '手术',
    value: 3
  },
  {
    label: '检验',
    value: 4
  },
  {
    label: '检查',
    value: 5
  },
  {
    label: '性别',
    value: 6
  },
  {
    label: '年龄',
    value: 7
  }
]
const tempMaps = [
  {
    label: '健康教育',
    value: 1
  },
  {
    label: '健康提醒',
    value: 2
  }
]

const dictData = ref([])

const formState = reactive({
  id: '',
  planName: '',
  isIn: 3,
  eventType: '',
  event: '',
  compare: '=',
  result: '',
  offset: '',
  unit: '',
  plan_type: 1,
  managePlanNodeEntity: [
    {
      pathDay: '',
      behaviorJson: [
        {
          type: 1,
          template_name: '',
          template_id: ''
        }
      ]
    }
  ]
})

const eventTypeChange = async (e) => {
  formState.event = ''
  formState.compare = '='
  formState.result = ''
}

const filterOption = (input: string, option: Option) => {
  return option.value.toUpperCase().indexOf(input.toUpperCase()) >= 0
}

const formState_reset = (item) => {
  modal.loading = false
  if (item) {
    Object.assign(formState, item)
  } else {
    Object.assign(formState, {
      id: '',
      planName: '',
      isIn: 3,
      eventType: '',
      event: '',
      compare: '=',
      result: '',
      offset: '',
      unit: '',
      plan_type: 1,
      managePlanNodeEntity: [
        {
          pathDay: '',
          behaviorJson: [
            {
              type: 1,
              template_name: '',
              template_id: undefined
            }
          ]
        }
      ]
    })
  }
}

const planName = ref('')

const condition = ref([
  {
    title: '创建者',
    dataIndex: 'creator',
    type: 'select',
    value: '',
    data: creatorList
  },
  {
    title: '已配置专病组',
    dataIndex: 'groupNames',
    type: 'select',
    value: '',
    data: groupList
  }
])
const conditionReset = () => {
  pagination.current = 1
  condition.value.map((v) => {
    v.value = ''
  })
  getList()
}

const pagination = reactive({
  current: 1,
  total: 0,
  pageSize: 10,
  showSizeChanger: true,
  pageSizeOptions: ['10', '20', '50', '100']
})

const columns = ref([
  {
    title: '序号',
    dataIndex: 'no',
    key: 'no',
    align: 'left',
    width: '50px'
  },
  {
    title: '管理方案名称',
    dataIndex: 'planName',
    key: 'planName',
    align: 'left',
    minWidth: 100
  },
  {
    title: '已配置专病分组',
    dataIndex: 'groupNames',
    key: 'groupNames',
    align: 'left',
    minWidth: 200,
    ellipsis: true
  },
  {
    title: '创建时间',
    dataIndex: 'createTime',
    key: 'createTime',
    align: 'left',
    width: '140px'
  },
  {
    title: '创建者',
    dataIndex: 'userName',
    key: 'userName',
    align: 'left',
    widht: '80px'
  },
  {
    title: '方案概要',
    dataIndex: 'summary',
    key: 'summary',
    align: 'left',
    minWidth: 200
  },
  {
    title: '操作',
    dataIndex: 'action',
    key: 'action',
    align: 'left',
    width: '200px'
  }
])

const loading = ref(false)
const List = ref([])

const getList = () => {
  loading.value = true
  const { current, pageSize } = pagination
  const obj = condition.value.reduce((c, v) => {
    if (v.value || v.value === 0) {
      return Object.assign(c, { [v.dataIndex]: v.value })
    } else {
      return c
    }
  }, {})
  const params = {
    page: current,
    limit: pageSize,
    planName: planName.value,
    ...obj
  }
  getPlanList(params)
    .then((res) => {
      loading.value = false
      if (res.data.total > 0 && !res.data.list.length) {
        pagination.current = pagination.current - 1
        getList()
      } else {
        pagination.total = res.data.total
        List.value = res.data.list
      }
    })
    .catch((e) => {
      loading.value = false
    })
}

const paginationChange = (p) => {
  Object.assign(pagination, p)
  getList()
}

const onSearch = () => {
  pagination.current = 1
  getList()
}

onMounted(() => {
  getList()
  getTempList()
})

const modal = reactive({
  open: false,
  type: 'save',
  loading: false,
  title: '新增管理方案'
})

const modalShow = (item) => {
  modelForm.value?.clearValidate()
  if (item) {
    modal.title = '管理方案详情'
    modal.type = 'detail'
    const obj = _.cloneDeep(item)
    obj.managePlanNodeEntity.map((v) => {
      v.behaviorJson = JSON.parse(v.behaviorJson)
    })
    formState_reset(obj)
    console.log(formState)
    modal.open = true
  } else {
    modal.title = '新增管理方案'
    modal.type = 'save'
    formState_reset()
    modal.open = true
  }
}

const isInChange = (e) => {
  console.log(e.target.value)
  if (e.target.value == 3) {
    formState.eventType = ''
    formState.event = ''
    formState.offset = ''
    formState.unit = ''
  }
}

const tempTypeChange = (e, item) => {
  item.template_id = undefined
  item.template_name = ''
  // getTempList(e)
  //   .then((list) => {
  //     item.template_list = list
  //   })
  //   .catch((e) => {
  //     item.template_list = []
  //   })
}
const placeholderMsg = (index) => {
  let msg = ''
  switch (index) {
    case 1:
      msg = '请选择健康教育内容'
      break
    case 2:
      msg = '请选择健康提醒内容'
      break
    default:
      msg = '请选择随访内容'
  }
  return msg
}

const TemplateList: any = ref({})

const getTempList = async () => {
  await getTemplateMaps()
    .then((res) => {
      TemplateList.value = res.data
    })
    .catch((e) => {})
}

const pathDayChange = (e, item, name) => {
  item.pathDay = e

  formState.managePlanNodeEntity.forEach((ele, index) => {
    modelForm.value.validate([[name, index]])
  })
}

const templateChange = (e, list, item, day, name) => {
  const t = list.find((v) => {
    return v.id === e
  })
  item.template_name = t.templateName
  item.remind_type = t.remindType
  item.context = t.context
  modelForm.value.validate([name])
  // let param = {
  //   pathDay: '',
  //   behaviorJson: []
  // }
  // param.pathDay = day
  // param.behaviorJson.push(item)
  // validator_node('-', param)
}

const del = (index, item, name) => {
  Modal.confirm({
    title: '删除',
    icon: createVNode(ExclamationCircleFilled, {
      style: {
        color: 'var(--color--danger)'
      }
    }),
    content: '确认是否删除',
    okText: '确定',
    okButtonProps: {
      danger: true,
      type: 'primary'
    },
    cancelText: '取消',
    onOk() {
      console.log('OK')
      item.splice(index, 1)

      formState.managePlanNodeEntity.forEach((ele, index) => {
        modelForm.value.validate([[name, index]])
      })
    },
    onCancel() {
      console.log('Cancel')
    }
  })
}

const addOptions = (item) => {
  item.push({
    type: 1,
    template_name: '',
    template_id: undefined
  })
}

const addNode = () => {
  //   modelForm.value.validate().then(() => {})
  formState.managePlanNodeEntity.push({
    pathDay: '',
    behaviorJson: [
      {
        type: 1,
        template_name: '',
        template_id: undefined
      }
    ]
  })
}

const copyNode = (i, list) => {
  const node = _.cloneDeep(list[i])
  list.splice(i, 0, node)
}

const radioUnitChange = (value) => {
  formState.unit = value.target.value

  modelForm.value.validate().then(() => {})
}

const validator_offset = async (_, value) => {
  if (value) {
    const reg = new RegExp(/([1-9][0-9]{0,}$)/)
    if (!reg.test(value)) {
      return Promise.reject('请输入大于0的天数')
    }
    if (!formState.unit) {
      return Promise.reject('请选择单位')
    }
  }
  return Promise.resolve()
}

const validator_node = async (_, value) => {
  const reg = new RegExp(/([1-9][0-9]{0,}$)/)
  if (!reg.test(value.pathDay)) {
    return Promise.reject('请输入大于0的天数')
  }

  const pathDay = new Set(Array.from(formState.managePlanNodeEntity.map((v) => v.pathDay)))
  if (pathDay.size < formState.managePlanNodeEntity.length) {
    return Promise.reject('管理路径时间不能重复')
  }

  const f = value.behaviorJson.some((v) => {
    return v.type && v.template_id && v.template_name
  })
  if (!f) {
    return Promise.reject('请完善管理行为')
  }
  if (value.behaviorJson.length > 1) {
    const noData = value.behaviorJson.filter((v) => !v.template_id)
    if (noData.length > 0) {
      return Promise.reject('请完善管理行为')
    }

    const set = new Set(Array.from(value.behaviorJson.map((v) => v.template_id)))
    if (set.size < value.behaviorJson.length) {
      return Promise.reject('管理行为不能重复')
    }
  }
  return Promise.resolve()
}

const modelForm = ref(null)

const modalConfirm = () => {
  modal.loading = true
  modelForm.value
    .validate()
    .then(() => {
      if (!formState.managePlanNodeEntity.length) {
        message.error('请添加至少一个管理节点')
        modal.loading = false
        // return Promise.reject('请添加至少一个管理节点')
        return
      }
      if (formState.managePlanNodeEntity.length > 1) {
        const set = new Set(Array.from(formState.managePlanNodeEntity.map((v) => v.pathDay)))
        if (set.size < formState.managePlanNodeEntity.length) {
          message.error('存在时间重复管理节点，请确认')
          modal.loading = false
          return
        }
      }

      console.log('表单验证通过')
      const params = _.cloneDeep(formState)
      params.managePlanNodeEntity
        .sort((f1, f2) => f1.pathDay - f2.pathDay)
        .map((v) => {
          v.behaviorJson = JSON.stringify(v.behaviorJson)
        })
      if (modal.type === 'save') {
        PlanSave(params)
          .then((res) => {
            message.success('新建成功')
            modal.loading = false
            modal.open = false
            useDictTwo()
            conditionReset()
            // location.reload()
          })
          .catch((e) => {
            modal.loading = false
          })
      } else {
        PlanUpdate(params)
          .then((res) => {
            message.success('编辑成功')
            modal.loading = false
            useDictTwo()
            getList()
            modal.open = false
          })
          .catch((e) => {
            modal.loading = false
          })
      }
    })
    .catch((e) => {
      modal.loading = false
      if (!formState.managePlanNodeEntity.length) {
        message.error('请添加至少一个管理节点')
        return
      }
      // 表单校验失败
      modelForm.value.scrollToField(e.errorFields[0].name, {
        behavior: 'smooth',
        block: 'center'
      })
    })
}

const modalUpdate = () => {
  modal.type = 'update'
  modal.title = '编辑管理方案'
}

const useDictTwo = () => {
  const obj = {
    label: '全部',
    value: ''
  }
  let creatorListTwo = []
  getCreatorByManage().then((res) => {
    if (res.data && res.data.length > 0) {
      creatorListTwo = res.data.map((v) => {
        return {
          label: v.userName,
          value: v.creator
        }
      })
    }
    creatorListTwo.unshift(obj)
    condition.value[0].data = creatorListTwo
  })
}
const DelPlan = (item) => {
  Modal.confirm({
    title: '删除',
    class: 'confirm',
    icon: createVNode(ExclamationCircleFilled, {
      style: {
        color: 'var(--color--danger)'
      }
    }),
    content: '确定删除该方案么',
    okText: '确定',
    okButtonProps: {
      danger: true,
      type: 'primary'
    },
    cancelText: '取消',
    onOk() {
      console.log('OK')
      PlanDel(item.id).then(() => {
        message.success('删除成功')
        useDictTwo()
        getList()
      })
    },
    onCancel() {
      console.log('Cancel')
    }
  })
}

const modal2 = reactive({
  open: false,
  type: 'save',
  title: '新增健康教育处方'
})

const modal3 = reactive({
  open: false,
  type: 'save',
  title: '新增健康提醒'
})

const behaviorTemplateIndex = ref()
const manaIndex = ref()
const templateAdd = (type, index, num) => {
  behaviorTemplateIndex.value = index
  manaIndex.value = num
  if (type === 1) {
    Object.assign(formState2, {
      templateType: 1,
      templateName: '',
      context: ''
    })
    modelForm2.value?.clearValidate()
    modal2.open = true
  } else if (type === 2) {
    Object.assign(formState3, {
      templateType: 2,
      templateName: '',
      remindType: 2,
      context: ''
    })
    modelForm3.value?.clearValidate()
    modal3.open = true
  }
}

const modelForm2 = ref(null)
const formState2 = reactive({
  templateType: 1,
  templateName: '',
  context: ''
})

const modalConfirm2 = () => {
  modelForm2.value
    .validate()
    .then(() => {
      console.log('表单验证通过')
      formState2.context = JSON.stringify({ content: formState2.context })
      FollowFormAdd(formState2)
        .then(async (res) => {
          message.success('新建成功')
          await getTempList()
          modal2.open = false

          formState.managePlanNodeEntity[manaIndex.value].behaviorJson[
            behaviorTemplateIndex.value
          ].template_id =
            TemplateList.value[
              formState.managePlanNodeEntity[manaIndex.value].behaviorJson[
                behaviorTemplateIndex.value
              ].type
            ][0].id

          formState.managePlanNodeEntity[manaIndex.value].behaviorJson[
            behaviorTemplateIndex.value
          ].template_name =
            TemplateList.value[
              formState.managePlanNodeEntity[manaIndex.value].behaviorJson[
                behaviorTemplateIndex.value
              ].type
            ][0].templateName
          formState.managePlanNodeEntity[manaIndex.value].behaviorJson[
            behaviorTemplateIndex.value
          ].context = formState2.context
        })
        .catch(() => {
          formState2.context = JSON.parse(formState2.context).content
        })
    })
    .catch((e) => {
      // 表单校验失败
      console.log(e)
    })
}

const modelForm3 = ref(null)
const formState3 = reactive({
  templateType: 2,
  templateName: '',
  remindType: 2,
  context: ''
})

const modalConfirm3 = () => {
  modelForm3.value
    .validate()
    .then(() => {
      console.log('表单验证通过')
      formState3.context = JSON.stringify({ content: formState3.context })
      FollowFormAdd(formState3)
        .then(async (res) => {
          message.success('新建成功')
          await getTempList()
          modal3.open = false

          formState.managePlanNodeEntity[manaIndex.value].behaviorJson[
            behaviorTemplateIndex.value
          ].template_id =
            TemplateList.value[
              formState.managePlanNodeEntity[manaIndex.value].behaviorJson[
                behaviorTemplateIndex.value
              ].type
            ][0].id

          formState.managePlanNodeEntity[manaIndex.value].behaviorJson[
            behaviorTemplateIndex.value
          ].template_name =
            TemplateList.value[
              formState.managePlanNodeEntity[manaIndex.value].behaviorJson[
                behaviorTemplateIndex.value
              ].type
            ][0].templateName
          formState.managePlanNodeEntity[manaIndex.value].behaviorJson[
            behaviorTemplateIndex.value
          ].context = formState3.context
        })
        .catch(() => {
          formState3.context = JSON.parse(formState3.context).content
        })
    })
    .catch((e) => {
      // 表单校验失败
      console.log(e)
    })
}
</script>

<style lang="less" scoped>
@import './index.less';
.header {
  flex: 0 0 auto;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  .left {
    ::v-deep(.ant-space-item) {
      display: flex;
      flex-direction: row;
      align-items: center;
    }
    .title {
      font-size: 14px;
      font-family:
        PingFang SC,
        PingFang SC;
      font-weight: 400;
      color: #4e5969;
      line-height: 32px;
    }
  }
  .right {
    ::v-deep(.ant-space-item) {
      display: flex;
      flex-direction: row-reverse;
      align-items: center;
    }
  }
}
.main {
  flex: 1 1 auto;
  margin-top: 16px;
  overflow: hidden auto;
  :deep(.ant-table-wrapper) {
    .ant-table-cell {
      p {
        white-space: normal;
        margin-bottom: 0;
        .configuration {
          color: #3491fa;
          background: #e8f7ff;
          border-color: #3491fa;
          display: inline-block;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          max-width: 100%;
          margin-top: 10px;
          &:nth-child(1) {
            margin-top: 0;
          }
        }
        .success {
          color: #00b42a;
          background: #e8ffea;
          border-color: #00b42a;
          display: inline-block;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          max-width: 100%;
          margin-top: 10px;
          &:nth-child(1) {
            margin-top: 0;
          }
        }
        .groupTag {
          display: inline-block;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          max-width: 100%;
          margin-top: 10px;
          margin-right: 10px;
          &:nth-child(1) {
            margin-top: 0;
          }
        }
      }
    }
  }
}
.input {
  width: 210px !important;
}

.modelForm {
  .bar {
    border: 1px solid #e5e6eb;
    margin-bottom: 12px;
  }

  .node {
    background: #f7f8fa;
    margin: 0 0 10px;
    padding-bottom: 1px;
    .ant-form-item {
      margin-bottom: 8px;
    }
  }
  .red {
    color: #f56667;
  }
  .title {
    width: 100%;
    height: 32px;
    background: #f7f8fa;
    font-size: 14px;
    font-family:
      PingFang SC,
      PingFang SC;
    font-weight: 500;
    color: #1d2129;
    line-height: 32px;
    padding: 0 16px;
  }
  .add {
    width: 1160px;
    height: 32px;
    font-size: 14px;
    font-family:
      PingFang SC,
      PingFang SC;
    font-weight: 400;
    color: #165dff;
    border-color: #165dff;
    line-height: 22px;
  }
  .icon-plus,
  .icon-del {
    font-size: 16px;
  }
  .icon-plus {
    color: #165dff;
  }
  .icon-del {
    color: #f53f3f;
  }
}
.row {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.ant-form .ant-input {
  width: 100% !important;
}
</style>
